<template>
  <div class="video-container">
    <video
      ref="videoRef"
      class="video-player"
      controls
      autoplay
      @error="handleVideoError"
    >
      <source :src="videoUrl" :type="videoType">
      您的浏览器不支持视频播放
    </video>

    <div v-if="error" class="error-message">
      {{ error }}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  videoUrl: {
    type: String,
    required: true
  },
  videoType: {
    type: String,
    default: 'video/mp4'
  }
})

const videoRef = ref(null)
const error = ref(null)

const handleVideoError = (e) => {
  error.value = `视频加载失败: ${e.target.error.message}`
}

onMounted(() => {
  if (videoRef.value) {
    videoRef.value.play().catch(err => {
      error.value = `视频播放失败: ${err.message}`
    })
  }
})

onUnmounted(() => {
  if (videoRef.value) {
    videoRef.value.pause()
    videoRef.value.src = ''
  }
})
</script>

<style scoped>
.video-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.video-player {
  width: 100%;
  height: auto;
  background-color: #000;
}

.error-message {
  color: red;
  padding: 10px;
  text-align: center;
  margin-top: 10px;
}
</style>
